<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">佣金明细</x-header>
    <div class="main-header">
      <scroller
        :scroll-bottom-offset="50"
        lock-x
        :use-pulldown="true"
        :use-pullup="true"
        :pulldownConfig="{downContent:'↓',upContent:'↑松开刷新',loadingContent:'请稍后'}"
        @on-pulldown-loading="viewPull('refresh', arguments)"
        :pullupConfig="{downContent:'↑',upContent:'',loadingContent:'请稍后',content:''}"
        @on-pullup-loading="viewPull('next', arguments)"
        v-model="status">
        <div class="box1">
          <div class="wallet-count">
            <div class="wallet-date">
              <div class="wallet-date-choose" @click="showDatetime">
                <div class="wallet-date-content">{{year + '年' + month + '月'}}</div>
                <div class="wallet-date-icon"></div>
              </div>
            </div>
            <div class="wallet-count-amount">
              <div class="count-amount-quantity">
                <p class="count-amount-title">{{count || 0}}</p>
                <p class="count-amount-number">返佣（笔）</p>
              </div>
              <div class="count-amount-gap"></div>
              <div class="count-amount-money">
                <p class="count-amount-title">{{reward || 0}}</p>
                <p class="count-amount-number">返佣（元）</p>
              </div>
            </div>
          </div>
          <div class="list-tab">
            <tab active-color custom-bar-width="30px">
              <tab-item selected @on-item-click="getReceiveList">返佣</tab-item>
              <tab-item @on-item-click="getCashList">提现</tab-item>
            </tab>
          </div>
          <div v-if="current === 1">
            <x-table :cell-bordered="false" style="background-color:#fff;">
              <thead>
              <tr>
                <th>方式</th>
                <th>姓名</th>
                <th colspan="2">放款金额</th>
                <th colspan="2">返佣金额</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in list" :key="index">
                <td v-if="item.sourceSrc === 1">下级注册佣金</td>
                <td v-else-if="item.sourceSrc === 2">下级贷款佣金</td>
                <td v-else-if="item.sourceSrc === 3">提现/td>
                <td v-else-if="item.sourceSrc === 4">提现失败</td>
                <td v-else-if="item.sourceSrc === 5">后台操作</td>
                <td v-else-if="item.sourceSrc === 6">放贷佣金</td>
                <td>{{item.sourceSrc === 6?item.applyName:item.name}}</td>
                <td colspan="2">{{item.loanAmount}}</td>
                <td colspan="2">{{item.reward}}</td>
              </tr>
              </tbody>
            </x-table>
          </div>
          <div v-if="current === 2">
            <x-table :cell-bordered="false" style="background-color:#fff;">
              <thead>
              <tr >
                <th>提现日期</th>
                <th>提现金额</th>
                <th>状态</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in list" :key="index">
                <td>{{item.createTime}}</td>
                <td>{{ parseFloat(item.actualAmount) + parseFloat(item.feeAmount)}}</td>
                <td v-if="item.status === 1" style="color: #1c80ff;">申请中</td>
                <td v-if="item.status === 2" style="color: red">提现失败</td>
                <td v-if="item.status === 3" style="color: green">提现成功</td>
              </tr>
              </tbody>
            </x-table>
          </div>
          <div class="list-blank" v-if="list.length === 0">
            <img src="../../../static/img/blank.png" class="list-blank-img"/>
            <p class="list-blank-p">您还没有返佣记录哦～</p>
          </div>
        </div>
      </scroller>
    </div>
    <!--<scroller lock-x height="200px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">-->
      <!--<div class="box2">-->
        <!--<p v-for="i in bottomCount">placeholder {{i}}</p>-->
        <!--<load-more tip="loading"></load-more>-->
      <!--</div>-->
    <!--</scroller>-->
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { XTable, dateFormat, cookie } from 'vux'
import { getUserRewardList } from '@/api/user'
export default {
  name: 'index',
  components: {
    bTabbar,
    XTable
  },
  data () {
    return {
      date: '2019-02',
      year: '2019',
      month: '02',
      current: 1,
      cid:'',
      list: [],
      reward: 0.00,
      count: 0,
      status:{
        pulldownStatus: '',
        pullupStatus: ''
      }
    }
  },
  methods: {
    showDatetime () {
      let _this = this
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM',
        value: this.date,
        onConfirm (val) {
          _this.date = val
          _this.year = val.split('-')[0]
          _this.month = val.split('-')[1]
          _this.getList()
          // replace(/^(\d{4})[\/|\-](\d{1,2})[\/|\-](\d{1,2})(.{3})(\d{1,2}):(\d{1,2}):(\d{1,2})$/mg, '$1年$2月$3日$4$5:$6')
        },
      })
    },
    getReceiveList() {
      if (this.current !== 1 ){
        this.list =[]
        this.current =  1
        this.getList()
      }
    },
    getCashList() {
      if (this.current !== 2 ){
        this.list =[]
        this.current =  2
        this.getList()
      }
    },
    getList(pageId) {
      getUserRewardList({cid:this.cid,createTime:this.date,type:this.current,pageId:pageId}).then(data=> {
        if (this.current === 1) {
          this.count = data.count
          this.reward = data.reward
        } else if (this.current === 2) {
          data.list.data =data.list.data.map(function(item){
            item.createTime = dateFormat(item.createTime, 'YYYY-MM-DD')
            return item
          })
        }
        this.cp = data.list.current_page
        this.lp = data.list.last_page

        if (this.cp === 1) {
          this.list = data.list.data
        } else {
          this.list = [...this.list,...data.list.data]
        }
      })
    },
    viewPull() {
      if (arguments[0] === 'refresh') {
        this.getList()
        setTimeout(() => {
          this.$set(this.status,'pulldownStatus','default')
        }, 500)
      } else if (arguments[0] === 'next') {
        if (this.cp >= this.lp) {
          this.$vux.toast.text('暂无更多')
          setTimeout(() => {
            this.$set(this.status,'pullupStatus','default')
          }, 200)
        } else {
          this.getList(this.cp + 1)
          setTimeout(() => {
            this.$set(this.status,'pullupStatus','default')
          }, 500)
        }
      }
    }
  },
  mounted () {
    const userInfo = JSON.parse(cookie.get('userInfo'))
    this.cid = userInfo.id
    this.date = dateFormat(new Date(), 'YYYY-MM')
    this.year = this.date.split('-')[0]
    this.month = this.date.split('-')[1]
    this.getList()
  }
}
</script>

<style scoped>
</style>
